<template>
  <div>
    <el-form size="small" :model="searchForm" label-width="140px">
      <el-row>
        <el-col :span="4" style="min-width: 300px">
          <el-form-item label="所属行政区域：">
            <el-cascader
              :options="districtTree"
              :props="districtListProps"
              clearable
              v-model="searchForm.districtId"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4" style="min-width: 300px">
          <el-form-item label="类型：">
            <el-select clearable v-model="searchForm.type" style="width: 100%">
              <el-option
                v-for="item in typeArray"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" style="min-width: 300px">
          <el-form-item label="状态：">
            <el-select clearable v-model="searchForm.state" style="width: 100%">
              <el-option
                v-for="item in stateArray"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" style="min-width: 300px">
          <el-button
            type="primary"
            size="mini"
            @click="getPagedMapList"
            style="margin-left: 15px"
            >查询
          </el-button>
          <el-button type="primary" size="mini" @click="add">添加</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      size="small"
      stripe
      :header-cell-style="tableHeaderCellStyle"
      style="margin-top: 15px"
    >
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">
          <label>{{ scope.$index + 1 + pageSize * (currentPage - 1) }}</label>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="地图数据编号" align="center" />
      <el-table-column
        prop="districtId"
        :formatter="formatterDistrict"
        label="所属行政区域"
        align="center"
      />
      <el-table-column
        prop="type"
        :formatter="formatterType"
        label="类型"
        align="center"
      />
      <el-table-column prop="centerLng" label="中心点经度" align="center" />
      <el-table-column prop="centerLat" label="中心点纬度" align="center" />
      <el-table-column prop="maxLng" label="最大经度" align="center" />
      <el-table-column prop="minLng" label="最小经度" align="center" />
      <el-table-column prop="maxLat" label="最大纬度" align="center" />
      <el-table-column prop="minLat" label="最小纬度" align="center" />
      <el-table-column
        prop="state"
        :formatter="formatterState"
        label="状态"
        align="center"
      />
      <el-table-column label="操作" width="350" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="check(scope.$index, scope.row)"
            >查看
          </el-button>
          <el-button
            type="primary"
            size="mini"
            @click="update(scope.$index, scope.row)"
            >编辑
          </el-button>
          <el-button
            v-if="scope.row.state === 2"
            type="primary"
            size="mini"
            @click="enable(scope.$index, scope.row)"
            >启用
          </el-button>
          <el-button
            v-else-if="scope.row.state === 1"
            type="danger"
            size="mini"
            @click="disable(scope.$index, scope.row)"
            >禁用
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="remove(scope.$index, scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="currentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="amount"
      style="float: right"
    />
    <el-dialog
      :title="detailDialogTitle"
      :visible.sync="detailDialogFormVisible"
      custom-class="dialog"
      :before-close="beforeHiddenDetailDialogFunc"
      center
      width="600px"
    >
      <detail
        ref="detailDialog"
        :districtTree="districtTree"
        :districtArray="districtArray"
        :typeArray="typeArray"
        :stateArray="stateArray"
        :form-data="mapData"
        :operate="operate"
        @hiddenDetailDialog="hiddenDetailDialogFunc"
      />
    </el-dialog>
  </div>
</template>

<script>
import Detail from "./Detail";
import {
  getPagedMapListByCondition,
  getDistrictListByCondition,
  getDistrictTreeByCondition,
  updateMapState
} from "../../axios/api";
import { Message } from "element-ui";

export default {
  data() {
    return {
      searchForm: {},
      districtTree: [],
      districtListProps: {
        expandTrigger: "hover",
        checkStrictly: true,
        emitPath: false,
        value: "id",
        label: "name"
      },
      tableData: [],
      pageSize: 10,
      amount: 0,
      currentPage: 1,
      tableHeaderCellStyle: {
        highlightCurrentRow: true
      },
      districtArray: [],
      typeArray: [
        { label: "标准地图", value: 1 },
        { label: "重点区域", value: 2 },
        { label: "合作区域", value: 3 }
      ],
      stateArray: [
        { label: "启用", value: 1 },
        { label: "禁用", value: 2 }
      ],
      detailDialogTitle: "",
      detailDialogFormVisible: false,
      mapData: {},
      operate: 0
    };
  },
  methods: {
    getData() {
      getDistrictListByCondition(
        {
          state: 1
        },
        data => {
          this.districtArray = data;
        },
        () => {
          this.districtArray = [];
        }
      );
      getDistrictTreeByCondition(
        {
          state: 1
        },
        data => {
          this.districtTree = data;
        },
        () => {
          this.districtTree = [];
        }
      );
      this.getPagedMapList();
    },
    getPagedMapList() {
      let params = {
        page: this.currentPage,
        pageSize: this.pageSize,
        districtId: this.searchForm.districtId || 0,
        type: this.searchForm.type || 0,
        state: this.searchForm.state || 0
      };
      getPagedMapListByCondition(
        params,
        data => {
          this.tableData = data.list;
          this.amount = data.amount;
        },
        () => {
          this.tableData = [];
          this.amount = 0;
        }
      );
    },
    formatterDistrict(row, column, cellValue) {
      let value = this.districtArray.filter(item => {
        return item.id === cellValue;
      })[0];
      if (value) return value.name;
      else return "不存在的行政区域";
    },
    formatterType(row, column, cellValue) {
      let value = this.typeArray.filter(item => {
        return item.value === cellValue;
      })[0];
      if (value) return value.label;
      else return "不存在的类型";
    },
    formatterState(row, column, cellValue) {
      let value = this.stateArray.filter(item => {
        return item.value === cellValue;
      })[0];
      if (value) return value.label;
      else return "不存在的状态";
    },
    currentChange(val) {
      this.currentPage = val;
      this.getPagedMapList();
    },
    add() {
      this.detailDialogTitle = "添加地图数据";
      this.detailDialogFormVisible = true;
      this.mapData = {
        state: 1
      };
      this.operate = 0;
    },
    check(index, row) {
      this.detailDialogTitle = "查看地图数据";
      this.detailDialogFormVisible = true;
      this.mapData = JSON.parse(JSON.stringify(row));
      this.operate = 2;
    },
    update(index, row) {
      this.detailDialogTitle = "编辑地图数据";
      this.detailDialogFormVisible = true;
      this.mapData = JSON.parse(JSON.stringify(row));
      this.operate = 1;
    },
    enable(index, row) {
      this.updateState(index, row, 1, "启用");
    },
    disable(index, row) {
      this.updateState(index, row, 2, "禁用");
    },
    remove(index, row) {
      this.$confirm("数据删除后将无法恢复，是否确认删除？", "提示", {}).then(
        () => {
          this.updateState(index, row, 3, "删除");
        },
        () => {}
      );
    },
    updateState(index, row, state, operateName) {
      row.state = state;
      updateMapState(
        row,
        () => {
          Message({
            showClose: true,
            message: operateName + "成功！",
            type: "success"
          });
          if (
            state === 3 &&
            this.tableData.length === 1 &&
            this.currentPage > 1
          ) {
            this.currentPage -= 1;
          }
          this.getPagedMapList();
        },
        res => {
          Message({
            showClose: true,
            message: res.msg,
            type: "error"
          });
        }
      );
    },
    beforeHiddenDetailDialogFunc(done) {
      this.$refs["detailDialog"].clearValidate();
      done();
    },
    hiddenDetailDialogFunc() {
      this.$refs["detailDialog"].clearValidate();
      this.detailDialogFormVisible = false;
      this.getPagedMapList();
    }
  },
  mounted() {
    this.getData();
  },
  components: {
    Detail
  }
};
</script>
